<template>
  <div>
    <div id="div2" class="head">
      <input id="fffff1" type="text" @click="selectEdit(1)" v-model="startTime1">
      <input id="fffff2" type="text" @click="selectEdit(2)" v-model="endTime1">
    </div>
    <div>
      <table class="table-goods">
        <colgroup>
          <col name="col01" width="100%">
        </colgroup>
        <thead>
          <tr>
            <th>课时表</th>
          </tr>
        </thead>
        <tr>
          <td class="time1" v-for="(timeItem,index) in myData" :key="index">
            <span id="timeDrag">{{timeItem.startTime + '-' + timeItem.endTime}}</span>
          </td>
          <td class="time1" >
            <span>1121212</span>
            <span>1121212</span>
            <span>1121212</span>
            <span>1121212</span>
            <span>1121212</span>
            <span>1121212</span>
            <span>1121212</span>
            <span>1121212</span>
            <span>1121212</span>
          </td>
        </tr>
      </table>
      <div>
        <input type="button" value="确定" @click="back">
      </div>
    </div>
  </div>
</template>

<script>
// import Ppp from '@/data/ppp.js'
// 鼠标位置和div的左上角位置 差值
// var dx, dy
// var screenWidth = window.screen.width
// var screenHeight = window.screen.height
export default {
  name: 'ManageSchedule',
  mounted () {
    console.log('ManageSchedule==Main========ManageSchedule=====================')
    // 调整后课时时间，默认为原课时时间
    this.myData = this.$route.query.data
    console.log('==myData=' + this.myData)
    console.log('==myData=' + this.myData[0].startTime)
    // this.endTime1 = this.$route.query.endTime
    // // 记录原来课程时间
    // this.startTimeOld1 = this.$route.query.startTime
    // this.endTimeOld1 = this.$route.query.endTime

    // let ss = document.getElementById('div2')
    // var child = ss.firstElementChild
    // while (child) {
    //   // console.log('=============' + child.id + '==============')
    //   this.getPos(child)
    //   child = child.nextElementSibling
    // }
    // let e1 = document.getElementById('fffff1')
    // // console.log(e1.innerText)
    // this.getPos(e1)
  },
  methods: {
    addScheduleM () {
      // let msg = {opt: 'modify', startTime: this.startTime1, endTime: this.endTime1}
      // Ppp.$emit('sendTime', msg)
    },
    toStart (hour, min) {
      console.log('hour=' + hour + ',min=' + min + ',currentEdit=' + this.currentEdit)
      if (this.currentEdit === 1) {
        this.startTime1 = hour + ':' + min
        this.endTime1 = Math.floor(hour) + 1 + ':' + min
      } else {
        this.endTime1 = hour + ':' + min
      }
    },
    // 生命周期，mounted后面使用
    getPos (e1) {
      let str = 'L=' + Math.floor(e1.getBoundingClientRect().left) + ',T=' + Math.floor(e1.getBoundingClientRect().top) +
      ',w:' + Math.floor(e1.getBoundingClientRect().width) + ',h=' + Math.floor(e1.getBoundingClientRect().height)
      // let str = 'L=' + e1.left + ',T=' + e1.top + ',w:' + e1.width + ',h=' + e1.height
      console.log('e1===========' + e1.id + ':' + str)
      e1.value = str
    },
    isIn (element, x, y) {
      let y1 = element.getBoundingClientRect().top
      let x1 = element.getBoundingClientRect().left
      let w1 = element.getBoundingClientRect().width
      let h1 = element.getBoundingClientRect().height
      let ss = [element.id, Math.floor(x), Math.floor(y), Math.floor(x1), Math.floor(y1), Math.floor(w1), Math.floor(h1)]
      console.log('bwopopop===' + ss)
      if ((x > x1) && x < (x1 + w1) && (y > y1) && (y < (y1 + h1))) {
        return true
      } else {
        return false
      }
    },
    findDiv (x, y) {
      let ss = document.getElementById('div2')
      var child = ss.firstElementChild
      while (child) {
        // let y1 = child.getBoundingClientRect().top
        // let x1 = child.getBoundingClientRect().left
        // let w1 = child.getBoundingClientRect().width
        // let h1 = child.getBoundingClientRect().height
        // let str = [child.id, Math.floor(x), Math.floor(y), Math.floor(x1), Math.floor(y1), Math.floor(w1), Math.floor(h1)]
        // console.log('opopop===' + str)
        // console.log('=============' + child.id + '==============')
        if (this.isIn(child, x, y)) {
          return child
        }
        child = child.nextElementSibling
      }
      return null
    },
    // 实现移动端拖拽
    down (event, i) {
      console.log('down+++target=' + event.target.id + '+++currentTarget=' + event.currentTarget.id + '+++down++++++++++++++' + i)
      var touch
      if (event.touches) {
        touch = event.touches[0]
      } else {
        touch = event
      }
      console.log('bw鼠标点所在位置', touch.clientX, touch.clientY)
      console.log('bwdiv左上角位置', event.target.offsetTop, event.target.offsetLeft)
      if ((event.currentTarget !== null) && (event.target.id === 'timeDrag')) {
        this.flags = true
        this.move(event, i)
      }
    },
    move (event, i) {
      console.log('bw---------------move------------------' + this.flags)
      // 阻止页面的滑动默认事件
      document.addEventListener('touchmove', function () {
        event.preventDefault()
      }, false)
      if (this.flags) {
        var touch
        if (event.touches) {
          touch = event.touches[0]
        } else {
          touch = event
        }
        this.mouseposition.x = touch.clientX
        this.mouseposition.y = touch.clientY
      }
    },
    // 鼠标释放时候的函数
    end (event, i) {
      console.log('end+++target=' + event.target.id + '+++currentTarget=' + event.currentTarget.id + '+++end++++++++++++++' + i)
      console.log('end')
      this.flags = false
      console.log('end+++target=' + event.target.id + '+++currentTarget=' + event.currentTarget.id + '+++move++++++++++++++' + i)
      let ee = event.currentTarget
      var aa = this.findDiv(this.mouseposition.x, this.mouseposition.y)
      if (aa === null) {
        console.log('==============aaaa===not find')
      } else {
        console.log('==============aaaa===find' + aa.id + 'ee.innerText=' + ee.innerText)
        aa.value = ee.innerText
      }
    },
    selectEdit (i) {
      this.currentEdit = i
    },
    back () {
      this.addScheduleM('!!!test!!!')
      this.$router.go(-1)
    }
  },
  data () {
    return {
      startMin: [':00', ':15', ':30', ':45'],
      startHour: ['07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'],
      myData: [],
      startTime1: '1',
      endTime1: '1',
      currentEdit: 1,
      flags: false,
      mouseposition: {
        x: 0,
        y: 0
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.head{
  width: 100%;
}
.table-goods {
    width: 100%;
    top: 0px;
    margin-top: 15px;
    color: rgb(15, 15, 15);
    table-layout: fixed;
    /* border-collapse: collapse; */
    user-select: none;
    border: 2px solid rgba(95, 95, 121, 0.116);
    cursor: default;
  }
  .table-goods>tbody>tr {
    transition: background-color 200ms linear;
    border-top: 1px solid #ebeef5;
  }
  .table-goods>tbody>tr:hover {
    background-color: rgba(214, 119, 11, 0.1);
  }
  .table-goods td {
    text-align: left;
    line-height: 20px;
    font-size: 12px;
    border: 2px solid rgba(192, 202, 189, 0.26);
  }
  .table-goods th {
    line-height: 30px;
    font-size: 12px;
    background-color: rgba(141, 103, 191, 0.1);
  }
  .time1 {
    /* width: 40%; */
    background-color: rgba(77, 91, 170, 0.747);
    display: inline-block;
    font-size: 12px;
    border: 1px solid rgba(192, 202, 189, 0.26);
    /* position: fixed; */
    /* clear: both; */
  }
</style>
